<template>
<view class="container">
  <template v-if="!loading">

    <view class="content">
      <view class="title">
        <view>开票信息</view>
      </view>
      <view class="check-box">
        <view class="label">抬头类型</view>
        <view class="box">
          <u-radio-group
              v-model="form.type"
              placement="row"
          >
            <u-radio
                v-for="(item, index) in radiolist1"
                :key="index"
                :label="item.name"
                :name="item.value"
            >
            </u-radio>
          </u-radio-group>
        </view>
      </view>
      <view class="input">
        <view class="label" >
          <view>发票抬头</view>
<!--          <text class="iconfont icon-help arrow" ></text>-->
        </view>
        <view class="value">
          <u-input
              placeholder="请输入发票抬头"
              border="none"
              maxlength="50"
              v-model="form.bankName"
          ></u-input>
        </view>
      </view>
      <view class="input" v-if="form.type == 1">
        <view class="label">税号</view>
        <view class="value">
          <u-input
              placeholder="请输入纳税人识别号"
              border="none"
              maxlength="50"
              v-model="form.bankUser"
          ></u-input>

        </view>
      </view>
      <view class="input" v-if="form.type == 1">
        <view class="label">地址</view>
        <view class="value">
          <u-input
              placeholder="请输入您的公司地址"
              border="none"
              maxlength="50"
              v-model="form.bankAccount"
          ></u-input>
        </view>
      </view>
      <view class="input" v-if="form.type == 1">
        <view class="label">开户账号</view>
        <view class="value">
          <u-input
              placeholder="请输入正确的银行账号"
              border="none"
              maxlength="50"
              v-model="form.bankAccount"
          ></u-input>
        </view>
      </view>
      <view class="input">
        <view class="label">开票金额</view>
        <view class="value">
          <span class="text">商品费</span>
          <span class="price">2000元</span>
        </view>
      </view>
    </view>
    <!--  v-if="status == -1 || status == 3"-->
    <view class="btn" :class="{disabled}" @click="submit">
      立即提交
    </view>
  </template>
  <template v-else>
    <u-loading-icon ></u-loading-icon>
  </template>
  <u-modal :show="show" title="提示" :content='content' confirmText="好的" @confirm="confirm"></u-modal>
</view>
</template>

<script>
export default {
  data(){
    return {
      loading:false,
      status:-1,
      show:false,
      content:'为确保您的资金能够顺利到账，请您填写具体的开户行支行信息。感谢您的配合。',
      radiolist1: [{
        name: '单位',
        value: 1
      },
      {
        name: '个人/非企业单位',
        value: 2
      }],
      disabled:false,
      form:{
        id:'',
        type:1,
        bankName:'',
        bankNo:'',
        bankUser:'',
        bankAccount:'',
        rejectReason:'',
        files1:[]
      }
    }
  },
  onLoad(){
    // this.getAccount()
  },
  methods: {
    getAccount(){
      const app = this;
      const params = {}
      app.loading = true;
      this.$request.get('wx/account/detail',params).then(({data}) => {
        if(!data.status){
          app.status = -1;
          return false;
        }
        app.status = data.status;
        app.form.id = data.id;
        app.form.type = 2;
        app.form.bankName = data.openBank;
        // app.form.bankNo = data.bankNo;
        app.form.bankUser = data.accountName;
        app.form.bankAccount = data.accountNo;
        app.form.rejectReason = data.rejectReason;
        let files = Object.values(JSON.parse(data.fileUrls));
        app.form.files1 = [];
        files.forEach((item,i)=>{
          app.form.files1.push({
            status: 'success',
            message: '',
            url: item
          })
        })
      }).catch(err=>{
        this.$toast(err.errmsg)
      }).finally(()=>{
        this.loading = false;
      })
    },
    // 删除图片
    deletePic(event) {
      this.form[`files${event.name}`].splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this.form[`files${event.name}`].length
      lists.map((item) => {
        this.form[`files${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this.form[`files${event.name}`][fileListLen]
        this.form[`files${event.name}`].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }))
        fileListLen++
      }
    },
    uploadFilePromise(url) {
      const app = this;
      return new Promise((resolve, reject) => {
        app.$request.urlFileUpload('wx/storage/upload',{
          files: [{path:url}], // 必填 临时文件路径 格式: [{path: "图片地址"}]
          // data:"向服务器传递的参数", //可不填
          // name:"后台接受文件key名称", //默认 file
        }).then(res=>{
          const data = res[0].data.url;
          setTimeout(() => {
            resolve(data)
          }, 1000)
        }).catch(err=>{
          app.$toast(err.errmsg)
          reject(err)
        })

      })
    },
    submit(){
      const app = this
      if (app.disabled) {
        return false
      }
      app.disabled = true;
      let fileUrls = {}
      if(app.form.files1.length>0){
        app.form.files1.forEach((item,i)=>{
          let key = 'file'+(i+1);
          fileUrls[key] = item.url
        })
        fileUrls = JSON.stringify(fileUrls)
      }
      let params = {
        accountType:app.form.type,
        accountName:app.form.bankUser,
        accountNo:app.form.bankAccount,
        bankNo:app.form.bankNo,
        openBank:app.form.bankName,
        fileUrls:fileUrls
      }
      if(app.form.id){
        params.id = app.form.id
      }
      app.$request.post('wx/account/submit',params).then(result => {
        app.$toast('提交成功')
        setTimeout(() => {
          uni.navigateBack();
        }, 1000)
      }).catch(err=>{
        app.$toast(err.errmsg)
      }).finally(() => app.disabled = false )
    },
    confirm(){
      const app = this;
      app.show = false;
      // uni.setClipboardData({
      //   data: 'https://www.lianhanghao.com/',
      //   success: function () {
      //     app.show = false;
      //     uni.showToast({
      //       title: '复制成功',
      //       duration: 2000
      //     })
      //   }
      // })
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  background: #FFF;
  padding-bottom: 100rpx;
  .tips{
    background: #FFF9F9;
    font-size: 24rpx;
    font-weight: 500;
    color: #A8A5A5;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8rpx;
    padding: 24rpx 30rpx;
    margin-bottom: 20rpx;
    .icon{
      width: 30rpx;
      height: 30rpx;
      flex-shrink: 0;
      margin-right: 10rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .error{
      font-size: 28rpx;
      font-weight: 500;
      color: #FB1F1E;
    }
    .error1{
      font-size: 24rpx;
      font-weight: 500;
      color: #2C2C2C;
    }
    .success{
      font-size: 28px;
      font-weight: 500;
      color: #343434;
    }
    .image{
      width: 28rpx;
      height: 28rpx;
      margin-top: 4rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
  }
  .content{
    padding: 30rpx;
    .title{
      padding-left:20rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #010812;
      position: relative;
      line-height: 32rpx;
      &:after{
        content: '';
        display: block;
        width: 8rpx;
        height: 32rpx;
        background: #1777FF;
        border-radius: 8rpx;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
      }
    }
    .check-box{
      display: flex;
      align-items: center;
      gap: 40rpx;
      padding:40rpx 20rpx;
      .label{
        font-weight: 400;
        color: #454545;
      }
      .box{
        display: flex;
        /deep/ .u-radio-group--row{
          align-items: center;
          .u-radio{
            margin-left: 20rpx;
          }
        }
      }
    }
    .input{
      line-height: 28rpx;
      padding: 26rpx 0;
      background: #f8f8f8;
      border-radius: 10rpx;
      display: flex;
      margin-bottom: 40rpx;
      .label{
        font-size: 28rpx;
        line-height: 48rpx;
        font-weight: 400;
        color: #242323;
        width: 200rpx;
        box-sizing: border-box;
        padding:0 20rpx;
        text-align: left;
        position: relative;
        display: flex;
        align-items: center;
        .arrow{
          font-size: 32rpx;
          color: #1777FF;
          padding-left: 10rpx;
        }
        &:after{
          content: '';
          display: block;
          width: 2rpx;
          height: 48rpx;
          background: #eeeeee;
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
        }
      }
      .value{
        font-size: 28rpx;
        font-weight: 400;
        color: #242323;
        flex: 1;
        padding:0 28rpx;
        display: flex;
        align-items: center;
        .arrow{
          font-size: 32rpx;
          color: #1777FF;
          padding: 0 20rpx;
        }
        .text{
          font-size: 26rpx;
          font-weight: 400;
          color: #A8A5A5;
          padding:0 5rpx;
        }
        .price{
          font-size: 26rpx;
          font-weight: 400;
          color: #FF0000;
          padding:0 5rpx;
        }
      }
    }
    .tips1{
      font-size: 30rpx;
      font-weight: 400;
      color: rgba(255,0,0,0.5);
      margin-top: 30rpx;
    }
    .upload{
      margin-top: 40rpx;
    }
  }
  .btn{
    margin: 0 30rpx;
    margin-top: 60rpx;
    height: 88rpx;
    border-radius: 20rpx;
    background: #1777FF;
    color: #FFF;
    font-size: 32rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .disabled{
    opacity: 0.6;
  }
}
</style>